<template>
    <div class="rulesThesaurus">
        <div class="header flexbetween" style="margin-bottom: 20px">
            <el-input placeholder="请输入关键字搜索" v-model="keyword" size="small" style="width: 300px">
                <span slot="suffix" class="iconfont icon-sousuo" @click="filterList"></span>
            </el-input>
            <div class="iconBtn">
                <el-tooltip effect="light" content="添加" placement="top" :enterable="false">
                    <span class="iconfont icon-tianjia" @click="addOpen"></span>
                </el-tooltip>
            </div>
        </div>

        <element-table :data="thsList" :columns="cloumns" :loading="tableLoading" :tableHeight="tableHeight" :pageNo="pageNo"
                       :pageSize="pageSize" :total="total" @changePageNo="changePageNo" @changePageSize="changePageSize">
        </element-table>

        <!-- 添加词库 -->
        <el-dialog :title="setTitle" :visible="setVisible" width="640px" :before-close="cancel" class="setDialog">
            <el-form label-width="80px" :model="thesaurusForm" :rules="thesRules" ref="thesaurusForm">
                <el-form-item label="词库:" prop="name">
                    <el-input size="small" v-model="thesaurusForm.name" style="width: 450px" maxlength="50"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel" size="small" type="text">取 消</el-button>
                <el-button type="primary" size="small" @click="submit">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑规则限定词 -->
        <el-dialog title="编辑规则限定词" :visible="rulesVisible" :before-close="rulesCancel" width="980px" class="rulesDialog" destroy-on-close>
            <div class="addHeader">
                <el-input v-model="addrulesInput" placeholder="请输入规则限定词" size="small" maxlength="50">
                    <el-button size="small" type="primary" slot="append" @click="addRules(addrulesInput)">添加</el-button>
                </el-input>
            </div>
            <div style="margin: 15px 0">
                <el-button size="small" type="primary" plain @click="importShow = !importShow">批量添加</el-button>
                <el-button size="small" plain @click="batchDelRules">批量删除</el-button>
            </div>
            <div class="simQueBox" v-loading="termLoading">
                <div class="check flexbetween">
                    <div class="allCheck">
                        <el-checkbox v-model="checkAll" @change="rulesCheckAll"></el-checkbox>
                    </div>
                    <el-input placeholder="输入搜索" size="small" style="width: 300px" v-model="rulesKeyword">
                        <span slot="suffix" class="iconfont icon-sousuo" @click="getTermList"></span>
                    </el-input>
                </div>
                <el-scrollbar style="height: 370px">
                    <div v-for="(item,index) in rulesThesaurusList" :key="index" class="simQueItem">
                        <div class="label">
                            <el-checkbox v-model="item.checked" @change="rulesItemChange"></el-checkbox>
                            <el-input v-model="item.editTerm" v-show="item.isEdit" size="small" />
                            <p :title="item.term" @dblclick="item.isEdit = true" v-show="!item.isEdit">{{item.term}}</p>
                        </div>
                        <div class="operation" v-show="item.isEdit">
                            <el-button size="mini" @click="editSubmit(index)">确定</el-button>
                            <el-button size="mini" @click="editCancel(index)">取消</el-button>
                        </div>
                        <div class="operation" v-show="!item.isEdit">
                            <el-tooltip effect="light" content="复制" placement="top" :enterable="false">
                                <span class="iconfont icon-fuzhi" @click="copyRules(index)"></span>
                            </el-tooltip>
                            <el-tooltip effect="light" content="删除" placement="top" :enterable="false">
                                <span class="iconfont icon-shanchu" @click="delRules(item.id)"></span>
                            </el-tooltip>
                        </div>
                    </div>
                </el-scrollbar>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="rulesCancel" size="small" type="text">取 消</el-button>
                <el-button @click="rulesCancel" type="primary" size="small">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 批量添加规则限定词 -->
        <import id="termImport" :importShow.sync="importShow" :importConfig="importConfig" @importSuccess="importSuccess" />
    </div>
</template>

<script>
import elementTable from "@/components/elementTable";
import Import from "@/components/Import";
import {
    getLexiconList, addLexicon, editLexicon, delLexicon,
    getTermList, addTerm, editTerm, delTerm
} from "@/api/thesaurus.js";
export default {
    name: "rulesThesaurus",
    data() {
        return {
            keyword: "",
            thsList: [],
            tableLoading: false,
            pageNo: 1,
            pageSize: 10,
            total: 0,
            cloumns: [
                {
                    config: {
                        label: "词库名称",
                        prop: "name"
                    },
                },
                {
                    config: {
                        label: "操作"
                    },
                    render: (h, scope) => {
                        return (
                            <div class="operation">
                                <el-tooltip effect="light" content="编辑" placement="top" enterable={false}>
                                    <span class="iconfont icon-bianjidaan" onClick={() => this.editOpen(scope)}></span>
                                </el-tooltip>
                                <el-tooltip effect="light" content="编辑规则限定词" placement="top" enterable={false}>
                                    <span class="iconfont icon-bianjixiangsiwenfa" onClick={() => this.editRules(scope.id)}></span>
                                </el-tooltip>
                                <el-tooltip effect="light" content="删除" placement="top" enterable={false}>
                                    <span class="iconfont icon-shanchu" onClick={() => this.delThesaurus(scope.id)}></span>
                                </el-tooltip>
                            </div>
                        );
                    },
                }
            ],
            editType: "add",
            editId: "",
            setVisible: false,
            thesaurusForm: {
                name: ""
            },
            thesRules: { name: [{ required: true, message: '请输入词库名称', trigger: "change" }] },
            rulesVisible: false,
            addrulesInput: "",
            checkAll: false,
            rulesKeyword: "",
            rulesThesaurusList: [],
            termLoading: false,
            importShow: false,
            importConfig: {
                css: {
                    "top": "50%",
                    "left": "50%",
                    "transform": "translate(-50%, -50%)",
                    "z-index": "3000"
                },
                title: "下载规则限定词导入模板，根据模板的格式填写限定词，填写完成后，一键导入",
                downloadUrl: "/static/download/规则限定词导入模板.xlsx",
                importUrl: "/v1/admin/rule/importTerm",
                importParam: {
                    lexiconId: ""
                }
            },
        }
    },
    methods: {
        getLexiconList() {
            this.tableLoading = true;
            var param = {
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                keyword: this.keyword
            }
            getLexiconList(param).then(resp => {
                this.tableLoading = false;
                if (resp.status == 0) {
                    var data = resp.data;
                    this.thsList = data.list || [];
                    this.total = data.total;
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        filterList() {
            this.pageNo = 1;
            this.getLexiconList();
        },
        addOpen() {
            this.editType = "add";
            this.setVisible = true;
        },
        editOpen(data) {
            this.$set(this.thesaurusForm, "name", data.name);
            this.editType = "edit";
            this.editId = data.id;
            this.setVisible = true;
        },
        submit() {
            this.$refs.thesaurusForm.validate((valid) => {
                if (valid) {
                    var param = { name: this.thesaurusForm.name };
                    if (this.editType == "add") {
                        addLexicon(param).then(resp => {
                            if (resp.status == 0) {
                                this.$antMessage.success("添加成功");
                                this.filterList();
                                this.cancel();
                            } else {
                                this.$antMessage.warning(resp.message);
                            }
                        });
                    } else {
                        param.id = this.editId;
                        editLexicon(param).then(resp => {
                            if (resp.status == 0) {
                                this.$antMessage.success("编辑成功");
                                this.getLexiconList();
                                this.cancel();
                            } else {
                                this.$antMessage.warning(resp.message);
                            }
                        });
                    }
                }
            });
        },
        cancel() {
            this.setVisible = false;
            this.thesaurusForm = {
                name: ""
            };
            this.$refs.thesaurusForm.resetFields();
        },
        delThesaurus(id) {
            this.$confirm("是否确定删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                delLexicon({ ids: id }).then((resp) => {
                    if (resp.status == 0) {
                        this.$antMessage.success("删除成功");
                        this.getLexiconList();
                    } else {
                        this.$antMessage.warning(resp.message);
                    }
                });
            }).catch();
        },
        changePageNo(val) {
            this.pageNo = val;
            this.getLexiconList();
        },
        changePageSize(val) {
            this.pageSize = val;
            this.getLexiconList();
        },
        getTermList() {
            var param = {
                pageNo: 1,
                pageSize: 999,
                lexiconId: this.editId,
                keyword: this.rulesKeyword
            }
            this.termLoading = true;
            getTermList(param).then(resp => {
                this.termLoading = false;
                if (resp.status == 0) {
                    var list = resp.data.list;
                    this.rulesThesaurusList = [];
                    list.forEach(item => {
                        this.rulesThesaurusList.push(
                            {
                                id: item.id,
                                checked: false,
                                isEdit: false,
                                term: item.term,
                                editTerm: item.term,
                            });
                    });
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        editRules(id) {
            this.editId = id;
            this.importConfig.importParam.lexiconId = id;
            this.getTermList();
            this.rulesVisible = true;
        },
        rulesCancel() {
            this.editId = this.rulesKeyword = this.addrulesInput = "";
            this.rulesVisible = this.checkAll = false;
        },
        addRules(term) {
            term = term.trim();
            if (term.length == 0) {
                return this.$antMessage.warning("规则限定词不能为空!");
            }
            addTerm({ lexiconId: this.editId, term }).then(resp => {
                if (resp.status == 0) {
                    this.$antMessage.success("添加成功");
                    this.addrulesInput = "";
                    this.getTermList();
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        rulesCheckAll(val) {
            if (val) {
                this.rulesThesaurusList.map(item => { item.checked = true; });
            } else {
                this.rulesThesaurusList.map(item => { item.checked = false; });
            }
        },
        rulesItemChange() {
            let checkedCount = (this.rulesThesaurusList.filter(item => item.checked == true)).length;
            this.checkAll = checkedCount === this.rulesThesaurusList.length;
        },
        editCancel(i) {
            if (this.rulesThesaurusList[i].id) {
                this.rulesThesaurusList[i].editTerm = this.rulesThesaurusList[i].term;
                this.rulesThesaurusList[i].isEdit = false;
            } else {
                this.rulesThesaurusList.splice(i, 1);
            }
        },
        editSubmit(i) {
            var term = this.rulesThesaurusList[i].editTerm;
            if (term.length == 0) {
                return this.$antMessage.warning("规则限定词不能为空!");
            }
            if (this.rulesThesaurusList[i].id) {
                this.rulesThesaurusList[i].term = term;
                this.rulesThesaurusList[i].isEdit = false;
                var param = { id: this.rulesThesaurusList[i].id, term };
                editTerm(param).then(resp => {
                    if (resp.status == 0) {
                        this.$antMessage.success("编辑成功");
                    } else {
                        this.$antMessage.warning(resp.message);
                    }
                });
            } else {
                this.addRules(term);
            }
        },
        copyRules(i) {
            var obj = { ...this.rulesThesaurusList[i] }
            obj.isEdit = true;
            obj.id = "";
            this.rulesThesaurusList.push(obj);
        },
        batchDelRules() {
            var delList = this.rulesThesaurusList.filter(item => item.checked == true);
            if (delList.length == 0) {
                this.$antMessage.warning("请先选择要批量删除的限定词!");
            } else {
                var ids = [];
                delList.forEach(item => ids.push(item.id));
                this.checkAll = false;
                this.delRules(ids.join(","));
            }
        },
        delRules(id) {
            this.$confirm("是否确定删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                delTerm({ ids: id }).then((resp) => {
                    if (resp.status == 0) {
                        this.$antMessage.success("删除成功");
                        this.getTermList();
                    } else {
                        this.$antMessage.warning("删除失败");
                    }
                });
            }).catch();
        },
        importSuccess() {
            this.getTermList();
        }
    },
    created() {
        this.getLexiconList();
    },
    computed: {
        setTitle() {
            return this.editType == "add" ? "添加词库" : "编辑词库";
        },
        tableHeight() {
            return document.body.clientHeight - 310;
        },
    },
    components: {
        elementTable,
        Import
    }
}
</script>

<style lang="scss">
.rulesThesaurus {
    .rulesDialog {
        .el-dialog__body {
            overflow: hidden;
        }
        .addHeader {
            display: flex;
            .el-button {
                flex-shrink: 0;
                width: 70px;
                border-color: #6b5ee2;
                background: #6b5ee2;
                color: #fff;
                border-radius: 0 6px 6px 0;
                height: 34px;
            }
            .el-input-group__append {
                border: none;
                vertical-align: inherit;
            }
        }
    }
    .simQueBox {
        border: 1px solid #dae1e9;
        border-radius: 6px;
        .check {
            height: 48px;
            background: #f5f7fa;
            padding: 0 20px 0 15px;
            border-radius: 6px;
            .allCheck {
                flex-shrink: 0;
                > span {
                    color: #363c43;
                    font-size: 14px;
                    margin-left: 15px;
                }
            }
            .icon-sousuo {
                font-size: 22px;
                color: #b7c1c9;
                margin-right: 8px;
                cursor: pointer;
            }
        }
        .simQueItem {
            height: 48px;
            display: flex;
            align-items: center;
            padding: 0 20px 0 15px;
            border-top: 1px solid #dae1e9;
            .label {
                flex: 1;
                display: flex;
                align-items: center;
                p {
                    color: #676e75;
                    margin: 0 15px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .el-input {
                    margin: 0 10px;
                }
            }
            .operation {
                flex-shrink: 0;
                .iconfont {
                    font-size: 24px;
                    color: #b7c1c9;
                    margin-left: 16px;
                    cursor: pointer;
                    &:hover {
                        color: #abb4bc;
                    }
                }
            }
        }
    }
}
</style>